<template>
  <div class="register">
    <div class="left">
      <div class="imga"></div>
    </div>
    <div class="right">
      <form action="" @submit.prevent="handleRegister">
        <div class="title">欢迎注册创思设备管理系统</div>
        <div class="youname">
          <div class="wenzi">姓名</div>
          <input type="text" v-model="username" />
        </div>
        <div class="email">
          <div class="wenzi">邮箱</div>
          <input type="email" v-model="email" />
        </div>
        <div class="passw">
          <div class="wenzi">密码</div>
          <input ref="refpassw" type="text" @input="changPattern" />
          <div class="eye">
            <span
              class="iconfont"
              :class="eye ? 'icon-yanjing_xianshi_o' : 'icon-yanjing_yincang_o'"
              @click="changEye"
            ></span>
          </div>
        </div>
        <div class="degree">
          密码强度 <span :style="{ color: colorArr[index] }">{{ powerDegree[index] }}</span>
        </div>
        <div class="agree">
          <label for="rem">
            <div class="wenzi">我已阅读用户协议并同意</div>
            <input id="rem" type="checkbox" v-model="hadRead" />
            <span class="hezi">
              <span class="iconfont icon-duihao"></span>
            </span>
          </label>
        </div>
        <button class="submit">注册</button>
        <div class="login">您已有平台账号 ？ <span @click="push('/login-manage')"> 用户登录</span></div>
        <div class="forget" @click="push('/login-manage/forgetpassw')">忘记密码</div>
      </form>
    </div>
  </div>
</template>

<script>
import { ElNotification } from 'element-plus'
import { register } from '../../services/index'
import useEye from '../../hooks/useEye'
import { reactive, ref, toRefs, h } from 'vue'
import { useRouter } from 'vue-router'

export default {
  setup(props) {
    const Router = useRouter()
    let hadRead = ref(false)
    let { changEye, eye, password, changPattern, refpassw, index } = useEye()

    const _data = reactive({
      username: '',
      email: '',
      colorArr: ['#FB0707', 'orange', '#00FF85'],
      powerDegree: ['简单', '中等', '很强'],
      index: -1
    })

    async function handleRegister() {
      if (!hadRead.value) {
        ElNotification({
          title: 'Title',
          message: h('i', { style: 'color: teal' }, '请同意')
        })
        return
      } else if (_data.username === '' || _data.eamil === '' || _data.password === '') {
        ElNotification({
          title: 'Title',
          message: h('i', { style: 'color: teal' }, '请填写完整')
        })
        return
      }
      let res = await register({
        username: _data.username,
        email: _data.email,
        password: password.value,
        sex: 1,
        birthDate: 0,
        phoneNumber: '',
        img: ''
      })
      if (res.username) {
        ElNotification({
          title: 'Title',
          message: h('i', { style: 'color: teal' }, '注册成功')
        })
        Router.push('/login-manage')
      }
    }

    return {
      ...toRefs(_data),
      push: Router.push,
      hadRead,
      changPattern,
      handleRegister,
      eye,
      changEye,
      refpassw,
      index
    }
  }
}
</script>

<style lang="less">
@import '../auto_css/Register.less';
</style>
